Tło jednokolorowe

Tło jednokolorowe wstawiamy w CSS instrtukcją background-color:kolor;. Wartość koloru można podać we wszystkich formatach rozpoznawanych przez CSS. Div posiada tło background-color:cyan

Wstawianie grafiki jako tła

Selektor { background-image: url(ścieżka dostępu do obrazka) }.
Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.

Różne sposoby powtarzania grafiki w tle

selektor { background-repeat: powtarzanie }
- repeat - powtarzanie tła w obu kierunkach (domyślnie)
- repeat-x - powtarzanie tła tylko w kierunku poziomym
- repeat-y - powtarzanie tła tylko w kierunku pionowym
- no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
- space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta w płaszczyźnie poziomej(CSS 3 - MSIE 9, Opera)
- round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta w płaszczyźnie pionowej(CSS 3 - MSIE 9, Opera)

Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.

Powtarzanie w poziomie

Powtarzanie w pionie

Bez powtarzania

Równomiernie rozlożenie w poziomie

Równomiernie rozlożenie w pionie

Pozycjonowanie

Natomiast jako "pozycja" należy wpisać:
Jedną wartość:
center - obrazek na środku (w centrum)
left - obrazek po lewej
right - po prawej
top - na górze
bottom - na dole
jednostka długości - odległość od lewej krawędzi
Dwie wartości (oddzielone spacją):
left top - lewy-górny róg
left bottom - lewy-dolny róg
right top - prawy-górny róg
right bottom - prawy-dolny róg
dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej
Pozwala ustalić pozycję obrazka w tle.

Gradient Linionwy

Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby:
słowa kluczowe
to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg)
to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika
to right - poziomo z lewej do prawej strony (odpowiednik 90deg)
to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika
to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie)
to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika
to left - poziomo z prawej do lewej strony (odpowiednik 270deg)
to left top - ukośnie z prawego-dolnego do lewego-górnego narożnika

kąt - liczony zgodnie z ruchem wskazówek zegara z wartością 0deg skierowaną pionową w górę, a 180deg - pionowo w dół Kolor1 odległość1, kolor2 odległość2... - kolejne kolory i ich odległości na linii przejścia gradientu. Obowiązkowo trzeba podać przynajmniej dwie pary "kolor odległość". Każda taka para jest rozdzielona od kolejnej znakiem przecinka. Wielokropek (czyli "...") na końcu należy usunąć. Określenie odległości kolorów nie jest obowiązkowe - wtedy podane barwy zostaną rozłożone równomiernie w gradiencie.

Narzędzia tworzące gradienty są znane z edytorów graficznych. Dzięki nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce użytkownika. Dlatego właśnie efekt gradientu wprowadzono do składni CSS, aby dać webmasterom lepszą kontrolę nad wyglądem stron.

Przy definiowaniu wyglądu gradientu kluczowe znaczenie ma tzw. linia gradientu. Musimy sobie ją wyobrazić jako prostą, która przebiega w kierunku przejścia barw z jednej w drugą. Na przykład gdy określimy następujący gradient: